RGBA和OPACITY背景介绍

大家在写页面时，会用到各种元素，比如div, img等等。有时候一张页面会放好几张图片，图片如果显示效果都一样，看起来很单调，

整个页面给人的感觉会很硬。那么，怎么能让页面的元素有一种多样化，甚至有一种朦胧美呢？于是，有了opacity和rgba()这两个属性。 其中，opacity属性是css3新提的属性。

display：none和visibility背景介绍

顾名思义，display：none和visibility是与元素显示有关系的，这两个属性都可以控制元素的 显示与隐藏。

究其作用，我们可以知道，为了提高用户的体验，实现更好的页面甚至元素与用户的互动，当用户开始某个操作时，可以通过display和visibility 这两个属性让元素显示或者隐藏, 或者以哪种方式显示。

综上所述；其实某个元素（或属性）产生的背景和原因，就是为了满足日益增长的用户体验要求。

二.知识剖析

1.Opacity和rgba()的用法以及二者的区别：

首先，opacity 中文翻译为：不透明度。
语法--opacity：value | inherit ;

取值说明: value 不透明度，从0.0(完全透明)到1.0（完全不透明）。

关于Opacity兼容性

Opacity是css3中的新属性，需要注意兼容性。

IE: filter:alpha(opacity)
Mozilla: -moz-opacity
Safari: -khtml-opacity

                

                    .opacity{
                    filter:alpha(opacity=50); /* IE */
                    -moz-opacity:0.5; /* 老版Mozilla */
                    -khtml-opacity:0.5;/* 老版Safari */
                    opacity: 0.5; /* 支持opacity的浏览器*/
                    }

                
                     

其次，看一下rgba(),

语法：rgba(r,g,b,a)

取值说明：

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数 | 百分数

A：Alpha透明度。取值0~1之间。

正整数为十进制0~255之间的任意值，百分数为0%~100%之间的任意值。

RGBA是在R（Red）G（Green）B（Blue）模式上增加了alpha通道，alpha通道是不透明度，即，如果一个元素的alpha通道数值为0%（或0）， 那该元素就是完全

透明的（也就是看不见的，但是可以透过该元素看到该元素下的元素），数值为100%（或255）时则意味着该元素完全不透明。

然后，RGBA和opacity都是用来设置元素的不透明度的，那么两者有什么区别呢？

opacity会继承父元素的opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。

简单来说就是opacity作用于元素和元素所有内容的透明,看一下例子，

所以，rgba相对于opacity还是技高一筹的，当然只要是涉及颜色的，都可以用rgba来设置。比如background-color,text-shadow, box-shadow。

2.关于CSS 中display：none 和visibility的用法和区别？

display 指定一个元素如何显示，visibility指定一个元素应该显示还是隐藏。Display属性可以改变一个元素的显示状态。

主要结合元素自身默认的display属性，根据布局页面的需求，来控制元素的显示状态,比如可以让inline元素，显示为inline-block或者block元素。反之亦然。

Visibility属性，表示元素是否可见。可取的值有--
默认值：visible
hidden,元素是不可见的
Inherit从父元素继承其属性值。

重点要讲的他们的区别：是display值为none时，visibility值为hidden时的区别。

当元素设置display属性值为none时，元素会消失不可见，屏幕阅读器不会读取这个元素，其本来所在的位置会让其后面的元素占据（元素是不存在，不占据位置的）。

而，visibility：hidden；表现上也是元素不见了，但是依然占有位置空间，仅仅是在视觉上“消失了”，hidden 也就是隐藏。

而对使用display：none；浏览器不会解析，搜索引擎可能会认为被隐藏的元素属于垃圾信息，会忽视。而且，屏幕阅读器会忽略被隐藏的文字。

最后，对使用visibility：hidden；虽然隐藏了，但是还是占了位置，需要配合position：relative；和position：absolute; 来使用，没有display：none；那么简单，灵活。

最后的最后，visibility：hidden；转换为visibility：visible;时，跟display：none转换为display：block;性能要好， 因为display在切换可见性时，会产生reflow,他要重新构建frame,当然要比visibility：visible；慢。

三.编码实战

display:none 的应用

---利用display:none 实现hover效果

四.参考文献

参考一：rgba详解

参考二:关于CSS属性中visibility隐藏和display消失的区别简析